// 处于激活状态的tab 的字体颜色
// $tab-title-active-color: #ff7e00;
$tab-title-active-color: #ff7eff;
// 列表线框的颜色
$border-color: $tab-title-active-color;

// tab 的高度
$tab-height: 300px;
// tab-title 的高度
$tab-title-height: 40px;

@mixin border-bottom {
    border-bottom: 1px solid $border-color;
}

@mixin display-block {
    display: block;
}

@mixin width-height-100 {
    width: 100%;
    height: 100%;
}

@mixin vertical-align-middle {
    &:after {
        // 空格与否无所谓
        content: "";
        // 不能是block
        display: inline-block;
        width: 0;
        height: 100%;
        // background-color: red;
        vertical-align: middle;
    }
}

.zamasu-tab-container {
    // @include width-height-100;
    width: 100%;
    // height: $tab-height;
    box-sizing: border-box;
    // background-color: lightgreen;

    * {
        box-sizing: border-box;
    }
    
    // ul
    .zamasu-tab-title {
        width: 100%;
        height: $tab-title-height;
        display: flex;
        // background-color: red;
        @include border-bottom;

        li {
            // float: left;
            flex: 1;
            text-align: center;
            font-size: 12px;
            vertical-align: middle;
            // background-color: blue;
            // &:after {
            //     content: ""; /* 空格与否无所谓 */
            //     display: inline-block; /* 不能是block */
            //     width: 0;
            //     height: 100%;
            //     // background-color: red;
            //     vertical-align: middle;
            // }
            @include vertical-align-middle;
        }

        .zamasu-tab-title-active {
            // background-color: green;
            // background-color: #ff7e00;
            color: $tab-title-active-color;
            // text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
            text-shadow: 0 0 9px rgba(255, 126, 0, 0.7);
        }
    }

    .zamasu-tab-content {
        width: 100%;
        // height: $tab-height - $tab-title-height;
        // overflow: hidden;
        // background-color: gray;

        // ul
        .zamasu-tab-list {
            display: none;
            overflow-y: scroll;
            height: 100%;

            li {
                @include border-bottom;

                a {
                    // @include display-block;
                    @include width-height-100;

                    display: flex;
                }

                .zamasu-tab-list-item-title {
                    flex: 3;
                    text-align: center;
                    font-size: 14px;
                    color: #333;

                    // &:after {
                    //     content: ""; /* 空格与否无所谓 */
                    //     display: inline-block; /* 不能是block */
                    //     width: 0;
                    //     height: 100%;
                    //     // background-color: red;
                    //     vertical-align: middle;
                    // }
                    @include vertical-align-middle;
                }

                .zamasu-tab-list-item-icon {
                    flex: 1;
                    text-align: center;

                    img {
                        // width: 80%;
                        height: 100px;
                        vertical-align: middle;
                    }

                    // &:after {
                    //     content: ""; /* 空格与否无所谓 */
                    //     display: inline-block; /* 不能是block */
                    //     width: 0;
                    //     height: 100%;
                    //     // background-color: red;
                    //     vertical-align: middle;
                    // }
                    @include vertical-align-middle;
                }
            }
        }

        .zamasu-tab-list-active {
            display: block;
        }
    }
}



// ul
// .zamasu-tab-list {
//     display: none;

//     li {
//         @include border-bottom;

//         a {
//             // @include display-block;
//             @include width-height-100;

//             display: flex;
//         }

//         .zamasu-tab-list-item-title {
//             flex: 3;
//             text-align: center;
//             font-size: 14px;
//             color: #333;

//             // &:after {
//             //     content: ""; /* 空格与否无所谓 */
//             //     display: inline-block; /* 不能是block */
//             //     width: 0;
//             //     height: 100%;
//             //     // background-color: red;
//             //     vertical-align: middle;
//             // }
//             @include vertical-align-middle;
//         }

//         .zamasu-tab-list-item-icon {
//             flex: 1;
//             text-align: center;

//             img {
//                 width: 80%;
//                 vertical-align: middle;
//             }

//             // &:after {
//             //     content: ""; /* 空格与否无所谓 */
//             //     display: inline-block; /* 不能是block */
//             //     width: 0;
//             //     height: 100%;
//             //     // background-color: red;
//             //     vertical-align: middle;
//             // }
//             @include vertical-align-middle;
//         }
//     }
// }

// .zamasu-tab-list-active {
//     display: block;
// }